<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无人超市支付</title>
    <!--引入axios-->
    <script src="js/axios.min.js"></script>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="element_ui/index.js"></script>
    <link rel="stylesheet" href="element_ui/index.css">
    <style>
        p {
            margin: 0;
            border: 0;
            font-size: 25px;
        }

        /*a {*/
        /*    margin: 0;*/
        /*    border: 0;*/
        /*    font-size: 20px;*/
        /*}*/

        /*.el-header {*/
        /*    line-height: 15vh;*/
        /*}*/

        .el-footer {
            text-align: center;
            line-height: 15vh;
            display: flex;
            justify-content: space-between;
            position: absolute;
            bottom: 5vh;
            width: 100%;
        }

        .my-button {
            width: 33%;
            font-size: 35px; /* 设置按钮字体大小 */
            padding: 12px 24px; /* 设置按钮内边距 */
        }

        .el-main {
            height: 85vh;
        }

        .el-dialog__title {
            font-size: 25px;
        }

        .el-form-item__label, .el-button {
            font-size: 20px;
        }

        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: 17vh;max-height: 150px;">
            <div>
                <el-avatar v-if="userId === ''" icon="el-icon-user-solid" :size="80"
                           style="float: left; margin-top: 6vh;"></el-avatar>
                <el-avatar v-if="userId !== ''" src="/apm/img/txBG.png" :size="80"
                           style="float: left; margin-top: 6vh;"></el-avatar>
                <el-descriptions title="会员信息" style="float: left; width: 80%; margin-left: 20px;margin-top: 20px;">
                    <el-descriptions-item label="会员号"> {{ userId === '' ? '请先登录' : userId}}</el-descriptions-item>
                    <el-descriptions-item label="手机号"> {{ phoneNumber === '' ? '' : phoneNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item label="性别">
                        <el-dropdown v-if="sex === '-1'" @command="handleSex">
                              <span class="el-dropdown-link">
                                点击选择性别<i class="el-icon-arrow-down el-icon--right"></i>
                              </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item command="0">女</el-dropdown-item>
                                <el-dropdown-item command="1">男</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <a v-if="sex !== '-1'">
                            {{ sex === '' ? '' : sex === '0' ? "女" : "男" }}
                        </a>
                    </el-descriptions-item>

                    <el-descriptions-item label="积分">
                        <el-tag size="small">{{ userPoints === '' ? '' : userPoints}}</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单条数">{{ userOrders.length }}</el-descriptions-item>
                </el-descriptions>
            </div>
        </el-header>
        <el-main>
            <el-collapse accordion v-if="userOrders.length !== 0">
                <el-collapse-item v-for="i in userOrders">
                    <template slot="title">
                        <p>{{ i.title }}</p>
                        <el-tag :type="i.statusFlag">{{ i.status }}</el-tag>
                        <p>应收：{{ i.priceProduct }}元，</p>
                        <p>优惠：{{ i.preferentialPrices }}元，</p>
                        <p>实收：{{ i.totalFee }}元</p>
                    </template>
                    <template>
                        <el-table
                                :data="i.tableData"
                                height="250"
                                border
                                style="width: 100%">
                            <el-table-column
                                    prop="productName"
                                    label="商品名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="count"
                                    label="数量"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="priceProduct"
                                    label="原价">
                            </el-table-column>
                            <el-table-column
                                    prop="preferentialPrices"
                                    label="优惠价格">
                            </el-table-column>
                            <el-table-column
                                    prop="totalFee"
                                    label="实付">
                            </el-table-column>
                        </el-table>
                    </template>
                </el-collapse-item>
            </el-collapse>
            <el-empty v-if="userOrders.length === 0 && userId === ''" description="未登录">
                <el-button type="primary" @click="MemberRegistration = true">点击登录</el-button>
            </el-empty>
            <el-empty v-if="userOrders.length === 0 && userId !== ''" description="查询为空">
            </el-empty>
        </el-main>
        <!--        <el-footer>-->
        <!--            <el-button class="my-button" round @click="MemberRegistration = true"><i class="el-icon-house"></i>登录-->
        <!--            </el-button>-->
        <!--            <el-button class="my-button" round><i class="el-icon-tickets"></i>订单</el-button>-->
        <!--            <el-button class="my-button" round><i class="el-icon-user"></i>个人信息</el-button>-->
        <!--        </el-footer>-->
    </el-container>
    <el-dialog title="无人超市-会员登录"
               :visible.sync="MemberRegistration"
               width="70%"
               @close="cancelMember"
               :destroy-on-close="true">
        <el-form :model="vip" ref="vipForm" label-width="120px" class="demo-ruleForm">
            <el-form-item
                    label="电话号码"
                    prop="phoneNumber">
                <el-input v-model.number="vip.phoneNumber"></el-input>
            </el-form-item>
            <el-form-item
                    label="验证码"
                    prop="code"
                    :rules="[
                          { required: true, message: '验证码不能为空'},
                          { type: 'number', message: '验证码必须为数字值'}
                        ]">
                <el-input v-model.number="vip.code" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="sendCode" :disabled="isSending || countdown > 0">
                    {{ isSending ? '发送中...' : countdown > 0 ? `${countdown}秒后重试` : '发送验证码' }}
                </el-button>
                <el-button type="primary" @click="vipForm" :disabled="sendSubDisabled">提交</el-button>
                <el-button @click="cancelMember">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script src="js/UserShow.js"></script>
</html>